<template>
  <div>

    <el-cascader
      placeholder="请选择地点"
      :props="props"
      v-model="categoryAndBrand"
      @change="handleChange"></el-cascader>

  </div>
</template>

<script>
  import { getCategoryReq, getBrandById } from '@/api/product'

  export default {
    name: "test",
    data() {
      return {
        categoryAndBrand:[{categoryId:'',categoryName:''}],
        props: {
          lazy: true,   //可以理解为开关，什么时候结束
          lazyLoad: this.getData
        },
      }
    },
    methods: {
      handleChange(value){
        console.log(value)
      },
      getData(node,resolve){
        const level = node.level
        const label = node.label
        const value = node.value

        console.log(level, label, value)
        console.log(node)
        let result;

        if (level === 0){
          getCategoryReq().then(response => {
            console.log(response)
            if (response.state === true) {
              result = response.data.category;
              result.forEach(item => {
                item.value = item.categoryId;
                item.label = item.categoryName
              })
              console.log("result =" + result)
              resolve(result)
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          })
        }else if (level === 1){
          getBrandById({categoryId: value}).then(response => {
            console.log(response)
            if (response.state === true) {
              result = response.data.brandList;
              result.forEach(item => {
                item.value = item.brandId;
                item.label = item.brandName
                item.leaf = level >= 1
              })
              console.log("result =" + result)
              resolve(result)
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          })
        }
      },
/*      cascaderLazyLoad(node, resolve) {
        if (!node) {
          return false
        }
        const { level } = node
        console.log(level)
        //level代表当前点击选择哪一项，，比如0代表第一次进去加载数据，1是选择省后的操作
        if (level === 0) {
          getCategory().then((res) => {   //换成你的接口方法
            console.log(res)
            if (res.code === '0') {
              resolve(
                res.data.category.map((val) => {
                  return {
                    value: val,
                    label: val,
                    leaf: level >= 2,  //因为省市区三项，所以第三次点击就不用在加载了，所以 >=2
                  }
                })
              )
            }
          })
        } else if (level === 2) {
          this.city = node.value    //同上要去查询区
        }
        let params = {
          province: this.province,
          city: this.city,
        }

      },*/
    },
    beforeMount() {
    }
  };
</script>

